<template>
  <div>
    <div style="padding: 20px">
      <ng-form-build ref="formBuild" :formTemplate="form" />
    <json-viewer :expand-depth="3" :boxed="true" :copyable="true" :expanded="true" :value="modelsData"></json-viewer>

      <div style="text-align: center">
        <el-button type="primary" size="mini" @click="dataFormSubmit()"
          >提交</el-button
        > 点击提交展示数据
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      ngData: JSON.parse(localStorage.getItem('ngData')) || [],
      form: {},
      modelsData: {}
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      const data = this.ngData.filter(
        (item) => String(item.frontId) === String(this.$route.query.frontId)
      )
      console.log(data)
      this.form = data[0].data
    },
    dataFormSubmit () {
      // 获取表单填报数据
      const models = this.$refs.formBuild.getData(true)
      this.modelsData = models
      console.log('表单提交:', JSON.stringify(models))
      console.log(models)
    }
  }
}
</script>

<style>
</style>
